<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网-淘！我喜欢</title>
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="../lib/css/normalize.css">
    <!-- 引入轮播样式表 -->
    <link rel="stylesheet" href="../lib/css/swiper-bundle.min.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入首页样式表 -->
    <link rel="stylesheet" href="../css/index.css">


</head>

<body>
    <!-- 导航栏位置 -->
    <div id="head" style="z-index: 3;">
        <div class="container">
            <div id="nav" class="clearfix">
                <ul class="left-list clearfix">
                    <li>
                        中国大陆
                        <ol>
                            <li>全球</li>
                            <li>中国大陆</li>
                            <li>中国香港</li>
                            <li>中国澳门</li>
                            <li>韩国</li>
                            <li>马来西亚</li>
                            <li>澳大利亚</li>
                            <li>新加坡</li>
                            <li>新西兰</li>
                            <li>加拿大</li>
                            <li>日本</li>
                            <li>越南</li>
                            <li>泰国</li>
                            <li>菲律宾</li>
                            <li>柬埔寨</li>
                        </ol>
                        <!-- 此处地区菜单需有进度条 -->
                    </li>
                    <!-- 地区二级菜单 -->
                    <li class="user-information"><a href="../pages/login.html">亲,&nbsp;请登录</a></li>
                    <!-- 登录按钮 -->
                    <li><a href="../pages/register.html">免费注册</a></li>
                    <!-- 注册按钮 -->
                    <li><a href="../pages/index.html">返回到首页</a></li>
                    <li><a href="#">网页无障碍</a></li>

                </ul>

                <ul class="right-list clearfix">
                    <li><a href="#">我的淘宝</a>
                        <ol>
                            <li><a href="#">已买到的宝贝</a></li>
                            <li><a href="#">我的足迹</a></li>
                        </ol>
                    </li>
                    <li><a href="#">购物车</a></li>
                    <li><a href="#">收藏夹</a>
                        <ol>
                            <li><a href="#">收藏的宝贝</a></li>
                            <li><a href="#">收藏的店铺</a></li>
                        </ol>
                    </li>
                    <li><a href="#">商品分类</a></li>
                    <li><a href="#">免费开店</a></li>
                    <li>|</li>
                    <li><a href="#">千牛卖家中心</a>
                        <ol>
                            <li><a href="#">开店入驻</a></li>
                            <li><a href="#">已卖出的宝贝</a></li>
                            <li><a href="#">出售中的宝贝</a></li>
                            <li><a href="#">卖家服务市场</a></li>
                            <li><a href="#">卖家培训中心</a></li>
                            <li><a href="#">体检中心</a></li>
                            <li><a href="#">电商学习中心</a></li>

                        </ol>
                    </li>

                    <li><a href="#">联系客服</a>
                        <ol>
                            <li><a href="#">消费者客服</a></li>
                            <li><a href="#">卖家客服</a></li>
                            <li><a href="#">意见反馈</a></li>

                        </ol>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 搜索栏位置 -->
    <div class="container" >
        <main id="search" class="clearfix">
            <img src="../static/images/TB1G7ALoxvbeK8jSZPfXXariXXa-160-66.png" alt="#">

            <div class="main-search-box clearfix">
                <ul>
                    <li>宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>
                <input type="text" placeholder="行李箱">
                <div>搜索</div>
            </div>
            <div class="qr">
                <span>下载淘宝</span>
                <img src="../static/images/TB18W1cQFXXXXaWXXXXXXXXXXXX-160-160.png_.webp" alt="#">
            </div>
        </main>



        <div class="product-menu clearfix">
            <div class="left-menu">
                <h4>分类</h4>
                <ul>
                    <li><a href="#">女装</a><span>/</span><a href="#">内衣</a><span>/</span><a href="#">奢品</a></li>
                    <li><a href="#">女鞋</a><span>/</span><a href="#">男鞋</a><span>/</span><a href="#">箱包</a></li>
                    <li><a href="#">美妆</a><span>/</span><a href="#">饰品</a><span>/</span><a href="#">洗护</a></li>
                    <li><a href="#">男装</a><span>/</span><a href="#">运动</a><span>/</span><a href="#">百货</a></li>
                    <li><a href="#">手机</a><span>/</span><a href="#">数码</a><span>/</span><a href="#">企业礼品</a></li>
                    <li><a href="#">家装</a><span>/</span><a href="#">电器</a><span>/</span><a href="#">车品</a></li>
                    <li><a href="#">食品</a><span>/</span><a href="#">生鲜</a><span>/</span><a href="#">母婴</a></li>
                    <li><a href="#">医药</a><span>/</span><a href="#">保健</a><span>/</span><a href="#">进口</a></li>
                </ul>
            </div>

            <div class="right-menu">
                <div class="top-menu">
                    <ul class="clearfix">
                        <li><a href="#" class="color-red">天猫</a></li>
                        <li><a href="#" class="color-red">聚划算</a></li>
                        <li><a href="#" class="color-green">天猫超市</a></li>
                        <li><a href="#">司法拍卖</a></li>
                        <li><a href="#">飞猪旅行</a></li>
                        <li><a href="#">天天特卖</a></li>
                        <li><a href="#">极有家</a></li>
                        <li><a href="#">淘宝直播</a></li>
                    </ul>
                    <!-- li前面可以设置一个::before添加| -->
                </div>


                <div class="bottom-menu clearfix">


                    <!--  轮播图 -->

                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <!-- 动态渲染去咯 -->
                        </div>


                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

                </div>

                <div class="user-information">
                    <div class="avatar"><img
                            src="https://img2.baidu.com/it/u=2600420285,2631529920&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"
                            alt=""></div>
                    <p>Hi!你好</p>
                    <div class="box">
                        <div class="btn1">
                            登录
                        </div>
                        <div class="btn2">
                            注册
                        </div>
                        <div class="btn3">
                            开店
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="product-page">
            <h4>猜你喜欢</h4>
            <span class="span1">个性推荐</span>
            <div class="product-img">
                <!-- 动态渲染去咯 -->
            </div>
        </div>
        <div class="aside"> 
            <div class="more">
                加载更多
            </div>
            <div class="back-to-top">
                回到太空
            </div>
        </div>
        
    </div>

    <!-- 引入axios库 -->
    <script src="../lib/js/axios.min.js"></script>
    <!-- 引入轮播js -->
    <script src="../lib/js/swiper-bundle.min.js"></script>
    <!-- 引入index.js -->
    <script src="../js/index.js"></script>
    <!-- 引入product.js -->
    <script src="../js/product.js"></script>

</body>

</html>